<template>
  <div class="c_right">
    <div class="c_top flex-column align-center flex">
      <div class="new_top m-auto"></div>
      <h3 class="m-0 p-0 mb-1">Coal information</h3>
      <h4 class="m-0 p-0 mb-1">煤炭信息</h4>
    </div>
    <div class="c_bottom flex align-center">
      <span>
        <img src="../../../assets/img/z.png" alt />
      </span>
      <ul class="p-0 m-0">
        <li class="flex flex-column steam align-center" v-for="(item,index) in mtzdList" :key="index">
          <b>{{item.vcName}}</b>
          <h3>{{item.vcCompanyName}}</h3>
          <h4>
            基价：含税坑口价
            <i>{{item.decPrice}}元/吨</i>
          </h4>
          <span>查看详情</span>
        </li>
        <!-- <li class="flex flex-column steam align-center">
          <b>晋能控股麦捷(1#混煤）-B标段</b>
          <h3>晋能控股煤业集团有限公司</h3>
          <h4>
            基价：含税坑口价
            <i>330元/吨</i>
          </h4>
          <span>查看详情</span>
        </li>
        <li class="flex flex-column steam align-center">
          <b>晋能控股麦捷(1#混煤）-B标段</b>
          <h3>晋能控股煤业集团有限公司</h3>
          <h4>
            基价：含税坑口价
            <i>330元/吨</i>
          </h4>
          <span>查看详情</span>
        </li>
        <li class="flex flex-column steam align-center">
          <b>晋能控股麦捷(1#混煤）-B标段</b>
          <h3>晋能控股煤业集团有限公司</h3>
          <h4>
            基价：含税坑口价
            <i>330元/吨</i>
          </h4>
          <span>查看详情</span>
        </li>
        <li class="flex flex-column steam align-center">
          <b>晋能控股麦捷(1#混煤）-B标段</b>
          <h3>晋能控股煤业集团有限公司</h3>
          <h4>
            基价：含税坑口价
            <i>330元/吨</i>
          </h4>
          <span>查看详情</span>
        </li>
        <li class="flex flex-column steam align-center">
          <b>晋能控股麦捷(1#混煤）-B标段</b>
          <h3>晋能控股煤业集团有限公司</h3>
          <h4>
            基价：含税坑口价
            <i>330元/吨</i>
          </h4>
          <span>查看详情</span>
        </li> -->
      </ul>
      <span>
        <img src="../../../assets/img/y.png" alt />
      </span>
    </div>
  </div>
</template>

<script>
import flcdApi from "@/api/newCenter/flcd";
export default {
  data() {
    return {
      intDicId:"",
      intCityId:"",
      pageSize:6,
      pageIndex:1,
      mtzdList:[],
    };
  },
  mounted() {
    this.getmtxxList()
  },
  methods: {
    getmtxxList() {
      flcdApi
        .mtxxList({intStruts:"1",intDicId:this.intDicId,intCityId:this.intCityId,pageSize:this.pageSize,pageIndex:this.pageIndex})
        .then((res) => {
          this.mtzdList = res.data.data.records;

        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="stylus" scoped>
.c_right {
  margin-right: 34px;
  width: 860px;
  height: 546px;
}

.c_top {
  width: 860px;
  height: 140px;
  background: #E2ECFF;

  h3 {
    font-size: 32px;
    color: #333333;
  }

  h4 {
    font-size: 24px;
    font-weight: 400;
    color: #0B0B0C;
  }
}

.c_bottom {
  width: 860px;
  height: 396px;
  background: #FFFFFF;
  box-shadow: 6px 7px 52px 5px rgba(0, 0, 0, 0.05);
  margin-top: 10px;

  li {
    list-style: none;
  }

  .steam {
    width: 238px;
    height: 148px;
    background: #F8F9FF;
    border-radius: 6px;
    float: left;
    list-style: none;
    margin-top: 12px;
    margin-left: 25px;

    b {
      font-weight: normal;
      color: #1A1A1A;
      font-size: 12px;
      margin-top: 5px;
    }

    h3 {
      font-size: 16px;
      color: #1A1A1A;
      font-weight: 600;
      margin-top: 12px;
    }

    h4 {
      font-size: 16px;
      color: #1A1A1A;
      font-weight: 400;
      margin-top: -5px;

      i {
        font-style: normal;
        font-weight: bold;
        color: #EB424C;
        font-size: 16px;
      }
    }

    span {
      display: block;
      width: 114px;
      line-height: 28px;
      background: #557DFF;
      color: #FFFFFF;
      font-size: 14px;
      margin-top: -5px;
      text-align: center;
      border-radius: 4px;
    }
  }
}
</style>